{extend name="mainadmin@layouts/base" /}
{block name="head"}
<link href="__STATIC__/main/css/stylesheets/uploadify/uploadify.min.css" rel="stylesheet"/>
<style>
    #imgsList li{
        float: left;
        display: inline;
        width: 134px;
        height: 134px;
        margin-right: 12px;
        font-size: 12px;
        position: relative;
    }
    #imgsList li .item_box {
        display: block;
        width: 130px;
        height: 130px;
        padding: 8px 5px;
        border: #d3d3d3 2px solid;
        background-color: #f6f6f6;
        text-align: center;
    }
    .item_box img {
        max-width: 100%;
        max-height: 100%;
    }
    #imgsList li.select .item_box{
        border: #fb6638 2px solid;
    }
</style>
{/block}
{block name="main" }
<header class="header b-b clearfix">

    <div class="page-breadcrumbs">
        <ul class="breadcrumb">
            <li>
                <i class="fa fa-ellipsis-v"></i>
                <strong>自定义组件上传类目</strong>
            </li>
        </ul>
        <a class="text-muted pull-right m-t-md m-r pointer" data-toggle="back" title="返回"><i
                class="fa fa-reply"></i></a>
    </div>

</header>
<form class="form-horizontal form-validate form-modal form_vbox" method="post" action="{:url('add')}">
<section class="vbox">
    <section class="scrollable wrapper w-f ">
        <section class="panel panel-default ">
            <div class="widget-body">
                <div class="collapse in">
                    <div class="form-group">
                        <label class="control-label col-sm-2">选择类目</label>
                        <div class="col-sm-8">

                            <select id="goods_select" class="m-r" style="width:250px;" data-toggle="select2"
                                    onChange="cateSelect($(this))">
                                <option value="">选择类目</option>
                                {foreach $third_cat_list as $vo}
                                <option value="{$vo.third_cat_id}">{$vo.first_cat_name} - {$vo.second_cat_name} - {$vo.third_cat_name}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>

                    <div class="cateInfo hide">
                        <div class="form-group">
                            <label class="control-label col-sm-2">类目名称：</label>
                            <div class="col-sm-6">
                                <div class="col-sm-6">
                                    <input type="text" class="input-max" name="third_cat_name" id="third_cat_name" readonly="true" data-rule-required="true" value="">
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-sm-2">类目资质：</label>
                            <div class="col-sm-6">

                                <label class="radio-inline">
                                    <input name="qualification_type"  value="1" type="hidden">
                                    <span class="qualification_type"></span>
                                </label>
                                
                                <label class="radio-inline">
                                    <span class="tooltip-darkorange fa fa-question-circle qualification" data-toggle="tooltip" data-placement="right" data-original-title=""></span>
                                </label>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-sm-2">商品资质：</label>
                            <div class="col-sm-6">

                                <label class="radio-inline">
                                    <input name="product_qualification_type" value="1" type="hidden">
                                    <span class="product_qualification_type">不需要</span>
                                </label>
                                <label class="radio-inline">
                                    <span class="tooltip-darkorange fa fa-question-circle product_qualification" data-toggle="tooltip" data-placement="right" data-original-title=""></span>
                                </label>
                            </div>
                        </div>


                        <div class="form-group">
                            <label class="control-label col-sm-2">一级类目：</label>
                            <div class="col-sm-6">
                                <div class="col-sm-6">
                                    <input type="text" class="input-max" name="first_cat_name" id="first_cat_name" readonly="true" data-rule-required="true" value="">
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-sm-2">二级类目：</label>
                            <div class="col-sm-6">
                                <div class="col-sm-6">
                                    <input type="text" class="input-max" name="second_cat_name" id="second_cat_name" readonly="true" data-rule-required="true" value="">
                                </div>
                            </div>
                        </div>


                        <div class="form-group">
                            <label class="control-label col-sm-2">营业执照：</label>
                            <div class="col-sm-7">
                                <div class="defUpImgBox" data-toggle="uploaderOne">
                                    <img id="img_cover" src="{$row.license|default='__STATIC__/main/img/image.png'}">
                                    <input id="license" type="hidden"  name="license"  value="">
                                    <div class="tips">点击上传</div>
                                </div>
                                <p>
                                    <a href="javascript:;" onclick="$('#license').val('');$('#img_cover').attr('src','__STATIC__/main/img/image.png');"><i class="fa fa-trash-o m-r-xs"></i>清除图片</a>
                                </p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2">资质材料：</label>
                            <div class="col-sm-9">
                                <div class="js_upload_container">
                                    <div class="js_file_upload ">
                                        <button type="button" class="btn btn-default js_new_upload" 
                                                data-submitname="images" data-file_type="big_picture" data-uploadpath="{:url('uploadImg')}"
                                                data-delpath="{:url('removeImg')}" style="position: relative; z-index: 1;">
                                            上传图片
                                        </button>
                                        <span class="maroon">*</span>
                                        <span class="help-inline"><small>图片格式：JPG、PNG格式，图片小于20MB， (可拖拽图片调整显示顺序) </small></span>
                                    </div>
                                    <div class="uploadify-queue js_file_upload_queue">
                                    </div>
                                    <ul class="ipost-list ui-sortable js_fileList share_img_list" data-required="true">
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </section>
    <footer class="footer bg-white b-t p-t">
        <div class="form-group">
            <div class="col-sm-4 col-sm-offset-1">
                <input type="hidden" name="third_cat_id" id="third_cat_id" value=""/>
                <button type="submit" class="btn btn-primary js_save_submit" data-loading-text="保存中...">保存</button>
                <button type="button" class="btn btn-default" data-toggle="back">取消</button>
            </div>
        </div>
    </footer>
</section>
</form>
<script type="text/javascript">
    $third_cat_list = {$third_cat_list|json_encode|raw};
    var qualification_type = 0;
    var product_qualification_type = 0;
    var cateInfo = [];

    function cateSelect(obj) {
        $id = obj.val();
        if ($id == '') {
            cateInfo = [];
            $('#third_cat_id').val(0);
            $('.cateInfo').addClass('hide');
            return false;
        }
        $('.cateInfo').removeClass('hide');
        cateInfo = $third_cat_list[$id];
        $('#third_cat_name').val(cateInfo.third_cat_name);
        $('#third_cat_id').val(cateInfo.third_cat_id);
        qualification_type = cateInfo.qualification_type

        $('.qualification').attr('data-original-title',cateInfo.qualification)

        if (qualification_type == 0) {
            $('.qualification').hide();
            $('.qualification_type').text('不需要');
        }else if(qualification_type == 1) {
            $('.qualification').show();
            $('.qualification_type').text('必填');
        }else{
            $('.qualification').show();
            $('.qualification_type').text('选填');
        }


        $('.product_qualification').attr('data-original-title',cateInfo.product_qualification)
        product_qualification_type = cateInfo.product_qualification_type
        if (product_qualification_type == 0) {
            $('.product_qualification_type').text('不需要');
            $('.product_qualification').hide();
        }else if(product_qualification_type == 1) {
            $('.product_qualification').show();
            $('.product_qualification_type').text('必填');
        }else{
            $('.product_qualification').show();
            $('.product_qualification_type').text('选填');
        }

        $('#first_cat_name').val(cateInfo.first_cat_name);
        $('#second_cat_name').val(cateInfo.second_cat_name);
    }

    $('.js_save_submit').on('click',function(){
        var third_cat_id = $('#third_cat_id').val();
        if (third_cat_id <= 0 || cateInfo == '') {
            _alert('请选择分类.');
            return false;
        }

        var license = $("#license").val();

        if (license == '') {
            _alert('请上传营业执照.');
            return false;
        }

        return true;
    })
    
</script>
{/block}
{block name="footer" }
<script type="text/javascript">
    seajs.use(["dist/plupload/init.js"])
</script>
{/block}